<template>
  <header>
    <!-- 头部 -->
    <van-nav-bar
      title="店铺"
      left-text="返回"
      right-text="详情"
      left-arrow
      @click-left="fanClick()"
      @click-right="xqingClick"
    />
    <div
      class="dian_head"
      :style="{
        backgroundImage: `url(${shopinfo.info && shopinfo.info.head_pic_url})`,
      }"
    >
      <div class="head_top">
        <!-- <h3>&lt;</h3> -->
        <div class="top_name">
          <div class="top_name_left">
            <img :src="shopinfo.info && shopinfo.info.picUrl" alt="" />
            <p>{{ shopinfo.info && shopinfo.info.name }}</p>
          </div>
          <div class="top_name_right">
            <!-- <span class="iconfont">&#xe613;</span> -->
            <van-icon
              :name="shoucangstatus ? 'like-o' : 'like'"
              color="red"
              size="7vw"
              @click="collect"
            />
          </div>
        </div>
      </div>
      <div class="head_nav">
        <div class="h_bottom">
          <div class="h_input"><input type="text" placeholder="搜索" /></div>
          <span
            @click="navClick((ssIndex = index))"
            :class="{ active: ssIndex == index }"
            v-for="(item, index) in nav"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div class="head_buttom">
        <div class="head_bom_box">
          <p>
            商家配送{{ shopinfo.info && shopinfo.info.deliveryTimeTip }}分钟 |
            距离{{ shopinfo.info && shopinfo.info.distance }}
          </p>
          <div class="hbbox_you">
            <span>￥7</span>
            <span>无门槛</span>
            <span>|</span>
            <span>领取</span>
          </div>
          <div class="spans"><span>京贴2元</span></div>
          <p>{{ shopinfo.info && shopinfo.info.bulletin }}</p>
        </div>
      </div>
    </div>

    <!-- 导航 -->
    <ul>
      <li v-for="(item, index) in shopinfo.taglist" :key="index">
        <span
          @click="listClick(index)"
          :class="{ active: ssIndexnav == index }"
          >{{ item.name }}</span
        >
      </li>
    </ul>

    <!-- 商品列表 -->
    <div class="content">
      <!-- <h3>{{ shopinfo.taglist}}</h3> -->
      <div
        class="foodlist"
        v-for="(item, index) in shopinfo.taglist &&
        shopinfo.taglist[ssIndexnav].goodlist"
        :key="index"
      >
        <div class="left"><img :src="item.picture" alt="" /></div>
        <div class="right">
          <h4>{{ item.name }}</h4>
          <p class="desc">{{ item.month_saled }}</p>
          <div class="bottom">
            <span>￥{{ item.min_price }}</span>
            <button @click="gouShop(item)">+</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>
      <!-- <div class="bm_left">
        <div class="icon">
          <span class="iconfont" @click="gouShop">&#xe609;</span>
        </div>
        <div class="bm_content">
          <span>￥{{zongjia}}</span>
          <p>另需配送费38元</p>
        </div>
      </div>
      <button>去结算</button> -->
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '70%' }"
      >
        <div class="tops">
          <h3>已选商品<span>{{num}}</span></h3>
          <div @click="clear" class="you"><span class="iconfont">&#xe627;</span>清空</div>
        </div>
        <div class="center_bottom" >
          <div class="bottom_main" v-for="(item,index) in shoplist" :key="index">
            <div class="bm_left">
              <img :src="item.picture" alt="" />
            </div>
            <div class="bm_content">
              <p>{{item.name}}</p>
              <p>{{item.min_price}}</p>
            </div>
            <div class="bm_right">
              <button @click="gouShopjian(item,index)" class="jian">-</button>
              <p>{{item.count}}</p>
              <button @click="gouShopjia(item,index)" class="jia">+</button>
            </div>
          </div>
        </div>
        <footer id="#abbs">
          <div class="bm_left">
            <div class="icon"><span class="iconfont">&#xe609;</span></div>
            <div class="bm_content">
              <span>￥{{zongjia}}</span>
              <p>另需配送费38元</p>
            </div>
          </div>
          <button>去结算</button>
        </footer>
      </van-popup>
    </footer>
  </header>
</template>

<script setup>
// import { NavBar } from "vant";
// import { Icon } from "vant";
import { Dialog } from "vant";
import { shop_shopinfo, shop_fav, shop_unfav, shopcart_list,shopcart_add, shopcart_sub,shopcart_clear } from "../api/index";
// import { Toast } from "vant";
import { Popup } from "vant";
import {useRoute,useRouter } from 'vue-router'
import  {onMounted,ref} from 'vue'
var ssIndex = ref(0)
var count = ref(0)
var num = ref(0)
var zongjia = ref(0)
var ssIndexnav= ref(0)
var show = ref(false)
var shoucangstatus = ref(true)
var nav= ref([
  { name: "点餐" }, { name: "评价" }, { name: "商家" }
])
var shopinfo= ref({})
var shoplist = ref([])
var shopnum =ref(0)
var $route = useRoute()
var $router = useRouter()

onMounted((res)=>{
    // Toast.loading({ duration: 0 })
    shop_shopinfo({ id: $route.params.id }).then((res) => {
      // Toast.clear(); //关闭loading提示
      if (res.data.code == 200) {
        // console.log(res.data.shopinfo);
        shopinfo.value = res.data.shopinfo;
        console.log(shopinfo.value);
      } else {
        Dialog({ message: res.data.msg }).then((res) => {
          if (res == "confirm") {
            $router.go(-1);
          }
        })
      }
    });
      var id = localStorage.getItem("id")
     shopcart_list({ userid: id}).then((res) => {
        console.log(res.data)
        shopnum.value= res.data.list
      });
})
// var num=()=>{
//       shoplist.value.map((item, index) => {
//           num.value += item.count;
//         }).join("");
// }
// var zongjia=()=>{
//         shoplist.value.reduce((item, index) => {
//          zongjia += item.min_price * item.count
//        }, 0)
// }
var clear=()=>{
            var id= localStorage.getItem("id")
            shopcart_clear({userid: id}).then((res)=>{
                if(res.data.code==200){
                    shoplist.value=[]
                }
            })
            if(shoplist.value==0){
                shopliststatus.value = !shopliststatus.value
            }
  
}
var gouShop=(item)=>{
   show.value = true;
      var id = localStorage.getItem("id")
      shopcart_add({ userid: id,goodid:item.id}).then((res) => {
        console.log(res);
        count.value ++
        shopcart_list({userid:id}).then((res)=>{
                shoplist.value=res.data.list
                console.log(shoplist.value);
            })
      });
}
var gouShopjia=(item)=>{
     show.value = true;
      var id = localStorage.getItem("id")
      shopcart_add({ userid: id,goodid:item.id}).then((res) => {
        console.log(res);
        count.value ++
        shopcart_list({userid:id}).then((res)=>{
                shoplist.value=res.data.list
                console.log(shoplist.value);
            })
      });
}
var gouShopjian=(item,index)=>{
      show.value = true;
      var id = localStorage.getItem("id")
      shopcart_sub({ userid: id,goodid:item.id}).then((res) => {
             if(res.data.code==200){
              count.value--
              if( shoplist[index].value.count<=0){
                 shoplist.value.splice(index,1)
               }
             }
      });
       shopcart_list({userid:id}).then((res)=>{
                shoplist.value=res.data.list
            })
}

    var navClick=(index)=> {
      ssIndex.value = index;
    }
    var listClick=(index)=> {
      ssIndexnav.value = index;
    }
    var fanClick=()=> {
      $router.go(-1);
    }
    var xqingClick=()=> {
      console.log($route.params.id);
      $router.push("/xqing/" +$route.params.id);
    }
    var collect=() =>{
      shoucang.value();
    }

    // 收藏店铺
    var shoucang=() =>{
      var id = localStorage.getItem("id");
      // window.localStorage.getItem('dpid',this.$route.params.id)
      if (shoucangstatus.value == true) {
        shop_fav({ userid: id, shopid: $route.params.id }).then((res) => {
          if (res.data.code == 200) {
            console.log(res.data);
            Toast.success("收藏成功");
            $store.commit("addTask", shopinfo.value);
            shoucangstatus.value = false;
          }
        });
      } else if (shoucangstatus.value == false) {
        shop_unfav({ userid: id, shopid: $route.params.id }).then(
          (res) => {
            if (res.data.code == 200) {
              console.log(res.data);
              Toast.success("取消收藏");
              $store.commit("appTask", shopinfo.value);
              shoucangstatus.value= true;
            }
          }
        );
      }
    }
</script>

<style >
* {
  padding: 0;
  margin: 0;
}
/*  top */
.dian_head {
  width: 100vw;
  height: 34vh;
  /* background: url("../assets/1.jpg"); */
}
.dian_head .head_top {
  height: 10vh;
  width: 100vw;
}
/* .dian_head .head_top h3 {
  padding: 1vh;
  color: white;
} */
.dian_head .head_top .top_name {
  color: rgb(255, 255, 255);
  margin: 0 auto;
  padding: 4.5vh 1vh;
  display: flex;
  width: 90vw;
  height: 9vw;
  align-items: center;
  justify-content: space-between;
}
.dian_head .head_top .top_name .top_name_left {
  display: flex;
  align-items: center;
}
.dian_head .head_top .top_name .top_name_left img {
  width: 7vw;
  height: 7vw;
  border-radius: 50px;
  margin-right: 1vw;
}

/* nav */
.dian_head .head_nav {
  font-size: 18px;
  height: 5vh;
  width: 100vw;
}
.dian_head .head_nav .h_bottom {
  display: flex;
  height: 5vh;
  color: white;
  line-height: 6vh;
}
.dian_head .head_nav .h_bottom .h_input {
  box-sizing: border-box;
  margin-right: 5.3333vw;
  margin-left: 2.6667vw;
}
.dian_head .head_nav .h_bottom .h_input input {
  width: 20vw;
  height: 4vh;
  line-height: 4vh;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  border-radius: 25px;
  color: rgb(82, 82, 82);
  border: transparent;
  border: 1px solid rgb(203, 203, 203);
  outline: none;
  box-sizing: border-box;
}
.dian_head .head_nav .h_bottom span {
  margin-right: 4vw;
  margin-left: 1vw;
}
.dian_head .head_nav .h_bottom span.active {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: inline-block;
  border-bottom: 2px solid rgb(255, 255, 255);
}

/* 优惠券 */
.dian_head .head_buttom {
  margin: 2vh auto 0;
  height: 15vh;
  width: 100vw;
  box-sizing: border-box;
}
.dian_head .head_buttom .head_bom_box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1vh 2vw;
  width: 90vw;
  margin: 0 auto;
  height: 13vh;
  background-color: white;
  border-radius: 5px;
}
.dian_head .head_buttom .head_bom_box p {
  font-size: 14px;
  margin-right: 1vw;
}
.dian_head .head_buttom .head_bom_box .hbbox_you {
  height: 3vh;
  line-height: 3vh;
  width: 38vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 2px;
  background-color: bisque;
}
.dian_head .head_buttom .head_bom_box p:nth-child(4) {
  width: 90vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dian_head .head_buttom .head_bom_box .spans span {
  font-size: 12px;
  background-color: rgba(255, 184, 184, 0.414);
  color: red;
  padding: 0.5vw;
  border-radius: 2px;
}

/* 导航样式 */
ul {
  float: left;
  list-style: none;
  box-sizing: border-box;
  width: 14vw;
}
ul li {
  box-sizing: border-box;
  margin-left: 0.6667vw;
  color: rgb(101, 101, 101);
  font-size: 14px;
  /* background-color: gray; */
  width: 28vw;
  height: 8vh;
  line-height: 8vh;
  text-align: center;
}
ul li span {
  box-sizing: border-box;
  display: inline-block;
  width: 28vw;
  height: 16px;
  line-height: 16px;
}
ul li span.active {
  color: red;
  font-weight: 700;
  border-left: 1px solid red;
}

/* 商品列表 */
.content {
  float: right;
  width: 70vw;
  overflow: auto;
  height: 77vh;
  box-sizing: border-box;
}
.content h3 {
  padding: 0.5vh 0;
}
.content .foodlist {
  margin: 4vw auto 0.5vw;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 70vw;
  height: 11.5vh;
  /* background-color: red; */
}
.content .foodlist .left {
  width: 25vw;
  height: 11.5vh;
  /* margin-right: 5px; */
}
img {
  width: 100%;
  height: 100%;
}
.content .foodlist .right {
  position: relative;
  width: 42vw;
}
.content .foodlist .right h4 {
  margin-bottom: 0.05rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content .foodlist .right .desc {
  font-size: 14px;
  color: rgb(133, 133, 133);
}
.content .foodlist .right .bottom {
  position: absolute;
  bottom: 2.25px;
  display: flex;
  justify-content: space-between;
  width: 90%;
}
.content .foodlist .right .bottom span {
  color: red;
  font-size: 18px;
}
.content .foodlist .right .bottom button {
  width: 7vw;
  height: 7vw;
  text-align: center;
  border-radius: 50%;
  color: white;
  border: transparent;
  background-color: rgb(30, 169, 224);
}

/* 底部 */
footer {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  position: fixed;
  align-items: center;
  height: 9vh;
  bottom: 0;
  width: 100vw;
  background-color: gray;
}

footer .bm_left {
  display: flex;
  align-items: center;
}

footer .iconfont {
  font-size: 60px;
  color: blue;
  margin-right: 10px;
}

footer .bm_content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
}

footer button {
  height: 6vh;
  width: 35vw;
  margin-right: 10vw;
  border-radius: 5px;
  font-size: 20px;
  color: white;
  outline: none;
  border: transparent;
  background-color: rgb(19, 203, 5);
}

/* 弹框样式 */

.tops {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20px;
  height: 80px;
}

.tops .iconfont {
  font-size: 25px;
  margin-right: 10px;
}

.tops h3 {
  font-size: 22px;
  height: 40px;
}

.tops .you {
  font-size: 22px;
  height: 40px;
}

.center_bottom {
  width: 94%;
  margin: 0 auto;
}

.center_bottom .bottom_main {
  margin: 20px auto;
  height: 20vh;
  width: 100%;
  border-radius: 10px;
  background-color: rgb(241, 241, 241);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.center_bottom .bottom_main .bm_left {
    width: 30vw;
}
.center_bottom .bottom_main .bm_left img{
 width: 100%;
  height: 90%;
}
.center_bottom .bottom_main .bm_content {
  height: 100%;
  display: flex;
  width: 20vw;
  margin-left: 2vw;
  flex-direction: column;
  justify-content: space-around;
}

.center_bottom .bottom_main .bm_right {
  width: 50vw;
  height: 100%;
  display: flex;
  justify-content:space-between;
  align-items: center;
}

.center_bottom .bottom_main .bm_right button {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  border: 2px solid rgb(71, 151, 255);
  color: rgb(71, 151, 255);
  font-size: 18px;
}

.center_bottom .bottom_main .bm_right button:nth-child(3) {
  color: white;
  background-color: rgb(71, 151, 255);
}

#abbs {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  position: fixed;
  align-items: center;
  height: 80px;
  bottom: 0;
  width: 100%;
  background-color: gray;
}

#abbs .bm_left {
  display: flex;
  align-items: center;
}

#abbs .iconfont {
  font-size: 60px;
  color: blue;
  margin-right: 10px;
}

#abbs .bm_content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
}

#abbs button {
  height: 50px;
  width: 150px;
  margin-right: 40px;
  border-radius: 5px;
  font-size: 20px;
  color: white;
  background-color: rgb(19, 203, 5);
}
</style>